<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="足迹" name="first">
        <el-timeline>
          <el-timeline-item timestamp="2018/4/12" placement="top">
            <div class="foot-item common">
              <a href="/blog/2">富文本编辑器CKEditor4在VUE中的配置及使用</a>
              <div>
                <span>2235 浏览</span>
                <span class="symbol"> · </span>
                <span>0 评论</span>
                <span class="symbol"> · </span>
                <span> <img src="@/assets/logo.png" alt="" />Guo_10_Jun </span>
              </div>
            </div>
            <div class="foot-item">
              <a href="/blog/2">富文本编辑器CKEditor4在VUE中的配置及使用</a>
              <div>
                <span>2235 浏览</span>
                <span class="symbol"> · </span>
                <span>0 评论</span>
                <span class="symbol"> · </span>
                <span> <img src="@/assets/logo.png" alt="" />Guo_10_Jun </span>
              </div>
            </div>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/3" placement="top">
            <div class="foot-item common">
              <a href="/blog/2">富文本编辑器CKEditor4在VUE中的配置及使用</a>
              <div>
                <span>2235 浏览</span>
                <span class="symbol"> · </span>
                <span>0 评论</span>
                <span class="symbol"> · </span>
                <span> <img src="@/assets/logo.png" alt="" />Guo_10_Jun </span>
              </div>
            </div>
            <div class="foot-item">
              <a href="/blog/2">富文本编辑器CKEditor4在VUE中的配置及使用</a>
              <div>
                <span>2235 浏览</span>
                <span class="symbol"> · </span>
                <span>0 评论</span>
                <span class="symbol"> · </span>
                <span> <img src="@/assets/logo.png" alt="" />Guo_10_Jun </span>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
      <el-tab-pane label="评论" name="second">
        <div class="comment-item">
          <p class="replay">真的特别好</p>
          <div class="replay-content">
            <div class="replay-info">
              <a href="">富文本编辑器CKEditor4在VUE中的配置及使用</a>
              <div>
                <span>2235 浏览</span>
                <span class="symbol"> · </span>
                <span>0 评论</span>
                <span class="symbol"> · </span>
                <span> <img src="@/assets/logo.png" alt="" />Guo_10_Jun </span>
              </div>
            </div>
            <span class="time">2022-06-6 15:15:28</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="点赞" name="third">
      <el-timeline>
          <el-timeline-item timestamp="2018/4/12" placement="top">
            <div class="foot-item common">
              <a href="/blog/2">富文本编辑器CKEditor4在VUE中的配置及使用</a>
              <div>
                <span>2235 浏览</span>
                <span class="symbol"> · </span>
                <span>0 评论</span>
                <span class="symbol"> · </span>
                <span> <img src="@/assets/logo.png" alt="" />Guo_10_Jun </span>
              </div>
            </div>
            <div class="foot-item">
              <a href="/blog/2">富文本编辑器CKEditor4在VUE中的配置及使用</a>
              <div>
                <span>2235 浏览</span>
                <span class="symbol"> · </span>
                <span>0 评论</span>
                <span class="symbol"> · </span>
                <span> <img src="@/assets/logo.png" alt="" />Guo_10_Jun </span>
              </div>
            </div>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/3" placement="top">
            <div class="foot-item common">
              <a href="/blog/2">富文本编辑器CKEditor4在VUE中的配置及使用</a>
              <div>
                <span>2235 浏览</span>
                <span class="symbol"> · </span>
                <span>0 评论</span>
                <span class="symbol"> · </span>
                <span> <img src="@/assets/logo.png" alt="" />Guo_10_Jun </span>
              </div>
            </div>
            <div class="foot-item">
              <a href="/blog/2">富文本编辑器CKEditor4在VUE中的配置及使用</a>
              <div>
                <span>2235 浏览</span>
                <span class="symbol"> · </span>
                <span>0 评论</span>
                <span class="symbol"> · </span>
                <span> <img src="@/assets/logo.png" alt="" />Guo_10_Jun </span>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 'first',
      timeLine: [{}, {}]
    }
  },
  methods: {
    // tabs点击的时间
    handleClick(item) {
      console.log(item.name)
    }
  }
}
</script>

<style lang="less" scoped>
.app-container {
  padding: 15px;
  background: #fff;
}
.foot-item.common {
  border-top: 1px solid #f0f0f2;
}
.foot-item {
  padding: 24px;
  border: 1px solid #f0f0f2;
  border-top: none;
  a {
    font-size: 16px;
    font-weight: 600;
    color: #222226;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    cursor: pointer;
    text-decoration: none;
  }
  div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    span {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #999aaa;
      img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: 4px;
      }
    }
    .symbol {
      margin: 0 8px;
    }
  }
}
.comment-item {
  border-radius: 2px;
  border: 1px solid #f0f0f2;
  margin-bottom: 16px;
  padding: 14px;
  .replay {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222226;
    line-height: 22px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .replay-content {
    margin-top: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    .replay-info {
      width: 450px;
      height: 60px;
      background: #fafafa;
      border-radius: 2px;
      padding: 12px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      flex-direction: column;
      div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-top: 10px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        span {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          color: #999aaa;
          img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-right: 4px;
          }
        }
        .symbol {
          margin: 0 8px;
        }
      }
    }
    .time {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999aaa;
      line-height: 20px;
    }
  }
}
</style>
